import React, { useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import { Box, CssBaseline, AppBar, Toolbar, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
import { Menu as MenuIcon } from '@mui/icons-material';

// 组件
import Sidebar from './components/Sidebar';
import HomePage from './pages/HomePage';
import KnowledgeDetail from './pages/KnowledgeDetail';
import KnowledgeForm from './pages/KnowledgeForm';
import CategoryPage from './pages/CategoryPage';
import CategoryForm from './pages/CategoryForm';
import TagsPage from './pages/TagsPage';
import TagForm from './pages/TagForm';
import CategoryDetail from './pages/CategoryDetail';

// 移除固定的drawerWidth，因为现在在Sidebar组件中动态设置

function App() {
  const [open, setOpen] = useState(true);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  // 根据设备类型设置不同的宽度
  const drawerWidth = isMobile ? 320 : 480;

  // 在移动设备上默认关闭侧边栏
  React.useEffect(() => {
    setOpen(!isMobile);
  }, [isMobile]);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar
        position="fixed"
        sx={{
          width: { sm: open ? `calc(100% - ${drawerWidth}px)` : '100%' },
          ml: { sm: open ? `${drawerWidth}px` : 0 },
          transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
        }}
      >
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && !isMobile && { display: 'none' }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            知识管理系统
          </Typography>
        </Toolbar>
      </AppBar>

      <Sidebar open={open} handleDrawerClose={handleDrawerClose} />

      <Box
        component="main"
        sx={{
          flexGrow: 1,
          p: 3,
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: open ? `${drawerWidth}px` : 0 },
          transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
          }),
          mt: '64px', // AppBar height
        }}
      >
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/knowledge/:id" element={<KnowledgeDetail />} />
          <Route path="/knowledge/new" element={<KnowledgeForm />} />
          <Route path="/knowledge/edit/:id" element={<KnowledgeForm />} />
          <Route path="/categories" element={<CategoryPage />} />
          <Route path="/category/new" element={<CategoryForm />} />
          <Route path="/category/edit/:id" element={<CategoryForm />} />
          <Route path="/category/:id" element={<CategoryDetail />} />
          <Route path="/tags" element={<TagsPage />} />
          <Route path="/tag/new" element={<TagForm />} />
          <Route path="/tag/edit/:id" element={<TagForm />} />
        </Routes>
      </Box>
    </Box>
  );
}

export default App;